<template>
  <div :class="{header:sticky}">
    <div class="header-title" v-show="sticky">
      <div class="side" @click="chooseCity">{{cityName}}</div>
      <div class="header-title-item">电影</div>
      <div class="side"></div>
    </div>
    <van-tabs v-model="active" line-width='60px' line-height='2px' title-active-color='#ff5f16' color='#ff5f16'>
      <van-tab replace to='/films/nowPlaying' title="正在热映" ></van-tab>
      <van-tab replace to='/films/comingSoon' title="即将上映"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs } from 'vant'

Vue.use(Tab)
Vue.use(Tabs)
export default {
  data () {
    return {
      sticky: false,
      active: 0,
      cityName: localStorage.getItem('cityName') || '北京'
    }
  },
  created () {
    // console.log(this.$route.path)
    if (this.$route.path === '/films/comingSoon') {
      this.active = 1
    }
  },
  mounted () {
    window.addEventListener('scroll', () => {
      const scrollTop = document.documentElement.scrollTop
      if (scrollTop >= 100) {
        this.sticky = true
      } else {
        this.sticky = false
      }
    })
  },
  methods: {
    chooseCity () {
      this.$router.replace('/city?goto=' + encodeURI(this.$route.path))
    }
  }
}
</script>

<style lang='scss' scoped>
  .header {
    height: 88px;
    border-bottom: 1px solid #ededed;
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    background: white;
      .header-title {
        height: 44px;
        line-height: 44px;
        text-align: center;
        display: flex;
        .side {
            width: 15%;
            font-size: 13px;
        }
        .header-title-item {
            flex: 1;
            font-size: 17px;
        }
      }
  }
</style>
